<template>
  <div>
    <z-main :loading="loading" title="注册" :selected-item="1">
      <div slot="main">
        <form>
          <group title="基础信息">
            <x-input title="登录名" placeholder="请输入登录名" :min="2" :max="12"></x-input>
            <x-input title="昵称" placeholder="请输入昵称" :min="2" :max="12"></x-input>
            <x-input title="邮箱" name="email" placeholder="请输入邮箱地址" is-type="email"></x-input>
            <x-input title="手机号码" name="mobile" placeholder="请输入手机号码" keyboard="number" is-type="china-mobile"></x-input>
          </group>

          <group title="密码确认">
            <x-input title="请输入密码" type="text" placeholder="" v-model="password" :min="6" :max="6" @on-change="handleChange"></x-input>
            <x-input title="请确认密码" v-model="password2" type="text" placeholder="" :equal-with="password"></x-input>
          </group>

          <group title="验证码" class="weui-cells_form">
            <x-input title="验证码" class="weui-cell_vcode">
              <img slot="right" class="weui-vcode-img" src="http://weui.github.io/weui/images/vcode.jpg">
            </x-input>
            <!-- <x-input title="发送验证码" class="weui-vcode">
              <x-button slot="right" type="default" mini>发送验证码</x-button>
            </x-input> -->
          </group>
          <div class="z-link">已有账号？点击这里<router-link to="/login">登录</router-link></div>
	        <x-button type="primary reg-btn" show-loading>注册</x-button>
        </form>
      
      </div>
    </z-main>
  </div>
</template>

<script>
  import {Group, XInput, XButton} from 'vux'
  import ZMain from '@/pages/zmain'

  export default {
  	data(){
  	  return {
  	  	loading:false,
  	  	password:'',
  	  	password2:'',
  	  }
  	},
  	components:{
  	  ZMain,Group,XInput,XButton
  	},
  	methods:{
  	  handleChange(v){
  	  	console.info(v);
  	  }
  	}
  }
</script>

<style lang="less" scoped>
  @import "../../assets/style/mixin";
  .z-link{
    padding-top: .4rem;
    .font(.7rem, 1.2);
    &>a{
      color: @green;
      padding-left: .2rem;
    }
  }
  .reg-btn{
    margin-top: .5rem;
  }
</style>